<template>
  <a-modal :width="500" :title="title" v-model="visible" :maskClosable="false" :confirmLoading="loading" @ok="onSubmit" @cancel="() => (visible = false)">
    <a-spin :delay="100" :spinning="loading">
      <a-form-model ref="sjhtform" :model="form" :rules="rules" :labelCol="lcol" :wrapperCol="wcol" @submit.stop="onSubmit">
        <a-form-model-item label="角色名称" prop="name">
          <a-input v-model="form.name" allowClear :maxLength="64" placeholder="请输入角色名称（限64字）" />
        </a-form-model-item>
        <a-form-model-item label="角色描述" prop="descriptor">
          <a-textarea v-model="form.descriptor" allowClear :maxLength="512" placeholder="请输入角色描述（限512字）" :rows="2" />
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>
<script>
import { pick } from 'lodash'
import { form } from '@/utils/mixins'
import { SaveRole } from '@/api/manage/role'
export default {
  name: 'SjhtRoleForm',
  mixins: [form],
  data() {
    return {
      rules: {
        name: [{ required: true, whitespace: true, message: '请输入角色名称', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 打开新建窗口
    create() {
      this.visible = true
      if (this.loading) return
      this.reset()
      this.title = '新建角色'
      this.form = {}
    },
    // 打开修改窗口
    update(data) {
      this.visible = true
      if (this.loading) return
      this.reset()
      this.title = `修改【${data.name}】角色`
      this.form = pick(data, ['id', 'name', 'descriptor'])
    },
    // 点击确定
    onSubmit(e) {
      e.preventDefault()
      this.$refs.sjhtform.validate(valid => {
        if (!valid) return false
        const who = this.$store.state?.user?.name
        const fd = Object.assign({}, this.form, { who })
        this.submit(SaveRole, fd)
      })
    }
  }
}
</script>